import React, { useState } from 'react';
import { to_f } from './cmd';
import {ErrView, CurTip, obj_empty, PanelTitle, BtSwitch, IkFindDate, useForm, Btn, ck_empty, end_day, start_day, loc, obj_str } from 'sui';

const Title = ({ cfg, hcmd, hopt }) => {
    const [show_lcl, showLcl] = useState(true);
    const [show_cl, showCl] = useState(true);
    const [show_ucl, showUcl] = useState(true);
    const [value, setValue] = useState({t_start: start_day(), t_end: end_day()});
    const form = useForm(setValue);

    const getOpt = () => {
        return {
            cl: show_cl,
            lcl: show_lcl,
            ucl: show_ucl,
        };
    };

    const hfind = (v) => {
        if (obj_empty(cfg)) {
            alert(loc("db_031"));
            return;
        }

        const ck = {
            time: (v) => ck_empty(v),
        };

        if (!form.hcheck(ck, value)) {
            return;
        }

        hcmd(value, getOpt());
    };

    return (
        <PanelTitle cl="gray">
            <div className="flex flex-col">
                <div className="inline-flex items-center mb-1 flex-wrap">
                    <CurTip label={obj_str(cfg, "name")} cur={obj_str(cfg, "sn")}>{loc("zw_150")}</CurTip>
                    <IkFindDate className="ml-4" name="time" name_s="t_start" name_e="t_end" label={loc("nui_29")} form={form} value={value} mg="dense"/>
                    <Btn className="ml-2" hcmd={hfind}>{loc("mt_09")}</Btn>
                </div>
                <div className="inline-flex flex-wrap items-center">
                    <div className="mr-4">{loc("zw_152")}</div>
                    <BtSwitch hcmd={v => showLcl(v)} checked={show_lcl}>LCL</BtSwitch>
                    <BtSwitch hcmd={v => showCl(v)} checked={show_cl}>CL</BtSwitch>
                    <BtSwitch hcmd={v => showUcl(v)} checked={show_ucl}>UCL</BtSwitch>
                    <Btn className="ml-5" hcmd={() => hopt(getOpt())}>{loc("zw_157")}</Btn>
                </div>
            </div>
        </PanelTitle>
    );
};

const SumLeft = ({ main, opt }) => {
    if (obj_empty(main) || obj_empty(main.sta)) {
        return null;
    }

    const sta = main.sta;
    const cpk = main.cpk;

    const st = "table-cell py-2 text-right";
    const px = "table-cell py-2 pl-2 pr-6";

    return (
        <div className="ml-6">
            <div className="ml-2 mt-2 text-base">{loc("task_071")}</div>
            <div className="table-row">
                <div className={`${st}`}>{loc("zw_156") + ": "}</div>
                <div className={`${px}`}>{to_f(cpk, "usl")}</div>
            </div>
            <div className="table-row">
                <div className={`${st}`}>{loc("zw_254") + ": "}</div>
                <div className={`${px}`}>{to_f(cpk, "sl")}</div>
            </div>
            <div className="table-row">
                <div className={`${st}`}>{loc("zw_155") + ": "}</div>
                <div className={`${px}`}>{to_f(cpk, "lsl")}</div>
            </div>
            <div className="table-row">
                <div className={`${st}`}>{loc("product_18") + ": "}</div>
                <div className={`${px}`}>{to_f(sta, "mean")}</div>
            </div>
            <div className="table-row">
                <div className={`${st}`}>{loc("product_30") + ": "}</div>
                <div className={`${px}`}>{main.total}</div>
            </div>
            <div className="table-row">
                <div className={`${st}`}>{loc("zw_252") + ": "}</div>
                <div className={`${px}`}>{to_f(sta, "std")}</div>
            </div>
            <div className="table-row">
                <div className={`${st}`}>{loc("zw_253") + ": "}</div>
                <div className={`${px}`}>{to_f(sta, "gstd")}</div>
            </div>
        </div>
    );
};

const SumRight = ({ main }) => {
    if (obj_empty(main) || obj_empty(main.cpk)) {
        return null;
    }

    const data = main.cpk;
    console.log(main)

    const st = "table-cell py-2 text-right";
    const px = "table-cell py-2 pl-2 pr-6";

    return (
        <div className="ml-6">
            <div className="flex flex-row">
                <div className="flex flex-col">
                    <div className="ml-2 mt-2 text-base">{loc("zw_255")}</div>
                    <div className="table-row">
                        <div className={`${st}`}>{"Pp: "}</div>
                        <div className={`${px}`}>{to_f(data, "pp")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{"PPL: "}</div>
                        <div className={`${px}`}>{to_f(data, "ppl")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{"PPU: "}</div>
                        <div className={`${px}`}>{to_f(data, "ppu")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{"Ppk: "}</div>
                        <div className={`${px}`}>{to_f(data, "ppk")}</div>
                    </div>
                </div>
                <div className="flex flex-col">
                    <div className="ml-8 mt-2 text-base">{loc("zw_256")}</div>
                    <div className="table-row">
                        <div className={`${st}`}>{"Cp: "}</div>
                        <div className={`${px}`}>{to_f(data, "cp")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{"CPL: "}</div>
                        <div className={`${px}`}>{to_f(data, "cpl")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{"CPU: "}</div>
                        <div className={`${px}`}>{to_f(data, "cpu")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{"Cpk: "}</div>
                        <div className={`${px}`}>{to_f(data, "cpk")}</div>
                    </div>
                </div>
            </div>
        </div>
    );
};

const NoData = ({ err }) => <ErrView err={err}/>;

const SumN = ({ main, opt }) => {
    if (obj_empty(main)) {
        return null;
    }

    const sta = main.sta;
    const cpk = main.cpk;

    const st = "table-cell py-2 text-right";
    const px = "table-cell py-2 pl-2 pr-6";

    return (
        <div className="flex flex-col">
            <div className="flex flex-row ml-6 mt-2">
                <div>
                    <div className="ml-2 mt-2 text-base">{loc("task_071")}</div>
                    <div className="table-row">
                        <div className={`${st}`}>{loc("zw_155") + ": "}</div>
                        <div className={`${px}`}>{to_f(cpk, "lsl")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{loc("zw_254") + ": "}</div>
                        <div className={`${px}`}>{to_f(cpk, "sl")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{loc("zw_156") + ": "}</div>
                        <div className={`${px}`}>{to_f(cpk, "usl")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{loc("product_18") + ": "}</div>
                        <div className={`${px}`}>{to_f(sta, "mean")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{loc("product_30") + ": "}</div>
                        <div className={`${px}`}>{main.total}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{loc("zw_252") + ": "}</div>
                        <div className={`${px}`}>{to_f(sta, "std")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{loc("zw_253") + ": "}</div>
                        <div className={`${px}`}>{to_f(sta, "gstd")}</div>
                    </div>
                </div>
                <div className="ml-8">
                    <div className="ml-2 mt-2 text-base">{loc("zw_255")}</div>
                    <div className="table-row">
                        <div className={`${st}`}>{"Pp: "}</div>
                        <div className={`${px}`}>{to_f(cpk, "pp")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{"PPL: "}</div>
                        <div className={`${px}`}>{to_f(cpk, "ppl")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{"PPU: "}</div>
                        <div className={`${px}`}>{to_f(cpk, "ppu")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{"Ppk: "}</div>
                        <div className={`${px}`}>{to_f(cpk, "ppk")}</div>
                    </div>
                </div>
                <div className="ml-8">
                    <div className="ml-8 mt-2 text-base">{loc("zw_256")}</div>
                    <div className="table-row">
                        <div className={`${st}`}>{"Cp: "}</div>
                        <div className={`${px}`}>{to_f(cpk, "cp")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{"CPL: "}</div>
                        <div className={`${px}`}>{to_f(cpk, "cpl")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{"CPU: "}</div>
                        <div className={`${px}`}>{to_f(cpk, "cpu")}</div>
                    </div>
                    <div className="table-row">
                        <div className={`${st}`}>{"Cpk: "}</div>
                        <div className={`${px}`}>{to_f(cpk, "cpk")}</div>
                    </div>
                </div>
            </div>
            <div className="ml-8 mt-2 text-base">{loc("zw_264")}</div>
        </div>
    );
};

export {SumN, NoData, SumRight, SumLeft, Title};
